import { html } from "lit";
import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
import { action } from "@storybook/addon-actions";
import { ifDefined } from "lit/directives/if-defined.js";
import { unsafeHTML } from "lit/directives/unsafe-html.js";

<Meta
  title="Components/Datepicker"
  component="bl-datepicker"
  argTypes={{
    type: {
      control: {
        control: 'text',
        description: 'Type of the datepicker'
      }
    },
  }}
/>

export const DatepickerTemplate = (args) => html`
  <bl-datepicker
    label=${ifDefined(args.label)}
    placeholder=${ifDefined(args.placeholder)}
    type=${ifDefined(args.type)}
    min-date=${ifDefined(args.minDate)}
    max-date=${ifDefined(args.maxDate)}
    start-of-week=${ifDefined(args.startOfWeek)}
    locale=${ifDefined(args.locale)}
    value=${ifDefined(args.value)}
    style=${ifDefined(args.style)}
    disabled-dates=${ifDefined(args.disabledDates)}
    ?month-year-only=${args.monthYearOnly}
    @bl-datepicker-change=${(e) => {
      action('bl-datepicker-change')(e)
    }}>${unsafeHTML(args.content)}
  </bl-datepicker>`


export const Template = (args) => html`${DatepickerTemplate({ ...args })}`;


# Datepicker

<bl-badge icon="document">[ADR](https://github.com/Trendyol/baklava/issues/894)</bl-badge>
  <bl-badge
  icon="puzzle">[Figma](https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?type=design&node-id=1412-8914&mode=design&t=b0kU7tBfJQFvz2at-0)</bl-badge>
<bl-badge icon="check_fill">RTL Supported</bl-badge>

Datepicker renders the calendar component within itself and provides the functionality provided by the calendar component.

### Usage

* Datepicker has three types such as **single**,**multiple** and **range**.Default datepicker type is `single`.You can set datepicker type by using `type` attribute.
* Datepicker has **min-date** and **max-date** attributes.By entering these values,you can disable all dates before min-date property or will disable all dates after max-date property.
* Another attribute **disabled-dates** is also restrict the dates that can be selected on the datepicker.
* Attribute **start-of-date** defines the days of the week, corresponding to 0 Sundays and 6 Saturdays. By entering this, you can choose from which day the datepicker will create the datepicker view.

## Datepicker Types

### Single Type Datepicker

Default datepicker type is `single` and you can only select a single day from datepicker.

<Canvas>
  <Story name="Single Type Datepicker"
         args={{ type: 'single', label: 'Single Datepicker', placeholder: 'Select a date' }}>
    {Template.bind({})}
  </Story>
</Canvas>

### Multiple Type Datepicker

You can select multiple days from Datepicker.

<Canvas>
  <Story name="Multiple Type Datepicker" args={{
    type: 'multiple',
    label: 'Multiple Datepicker',
    placeholder: 'Select multiple dates',
  }}>
    {Template.bind({})}
  </Story>
</Canvas>

### Range Type Datepicker

You can select date range from Datepicker.

<Canvas>
  <Story name="Range Type Datepicker"
         args={{ type: 'range', label: 'Range Datepicker', placeholder: 'Select date range' }}>
    {Template.bind({})}
  </Story>
</Canvas>

### Default Value

You can set a default value to datepicker.

<Canvas>
  <Story name="Set Value" args={{
    type: 'single',
    label: 'Single Datepicker',
    placeholder: 'Set default value',
    value: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 2)
  }}>
    {Template.bind({})}
  </Story>
</Canvas>

### Disabled Dates

You can set dates which you want to disable from Datepicker.

<Canvas>
  <Story name="Disabled Dates" args={{
    type: 'multiple',
    label: 'Disabled Dates',
    placeholder: 'Set disabled dates',
    disabledDates: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 2)
  }}>
    {Template.bind({})}
  </Story>
</Canvas>

### Input Width

You can set input width of datepicker as you wish.

<Canvas>
  <Story name="İnput Width"
         args={{
           type: 'single',
           label: 'Change input width',
           placeholder: 'Set input width',
           style: '--bl-datepicker-input-width: 200px;'
         }}>
    {Template.bind({})}
  </Story>
</Canvas>


### Min - Max Date

You can set min date or max date for the datepicker.

<Canvas>
  <Story name="Set min and max date"
         args={{
           type: 'single',
           label: 'Set min and max date',
           placeholder: 'Set min and max date',
           minDate: `${new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 2)}`,
           maxDate: `${new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 2)}`
         }}>
    {Template.bind({})}
  </Story>
</Canvas>

## Month and Year Only Selection

You can set the datepicker to month-year only mode by using the `month-year-only` attribute. When enabled, users can only select a month and year, not a specific day.

### Single Type Month-Year Only

<Canvas>
  <Story name="Month Year Only - Single"
         args={{
           type: 'single',
           label: 'Select Month and Year',
           placeholder: 'Select month and year',
           monthYearOnly: true
         }}>
    {Template.bind({})}
  </Story>
</Canvas>

## RTL Support

The datepicker component supports RTL (Right-to-Left) text direction. You can enable RTL mode by setting the `dir` attribute and `lang` attribute on a parent element or the `html` tag.

<Canvas>
  <Story name="RTL Support">
    {() => html`
      <div>
        <iframe
          srcdoc="
            <html dir='rtl' lang='ar'>
              <head>
                <script type='module' src='https://cdn.jsdelivr.net/npm/@trendyol/baklava@latest/dist/baklava.js'></script>
                <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/@trendyol/baklava@latest/dist/themes/default.css'>
                <style>
                  body {
                    margin: 0;
                    padding: 24px;
                    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
                  }
                  .container {
                    display: flex;
                    flex-direction: column;
                    gap: 32px;
                  }
                  .datepicker-group {
                    display: flex;
                    flex-direction: column;
                    gap: 8px;
                  }
                  bl-datepicker {
                    --bl-datepicker-input-width: 300px;
                  }
                  p {
                    margin: 0;
                  }
                </style>
              </head>
              <body>
                <div class='container'>
                  <div class='datepicker-group'>
                    <p>منتقي التاريخ الأحادي (Single Datepicker)</p>
                    <bl-datepicker
                      type='single'
                      label='اختر تاريخ'
                      placeholder='حدد تاريخًا'
                      locale='ar'
                      start-of-week='6'
                    ></bl-datepicker>
                  </div>

                  <div class='datepicker-group'>
                    <p>منتقي التواريخ المتعددة (Multiple Datepicker)</p>
                    <bl-datepicker
                      type='multiple'
                      label='اختر عدة تواريخ'
                      placeholder='حدد عدة تواريخ'
                      locale='ar'
                      start-of-week='6'
                    ></bl-datepicker>
                  </div>

                  <div class='datepicker-group'>
                    <p>منتقي نطاق التاريخ (Range Datepicker)</p>
                    <bl-datepicker
                      type='range'
                      label='اختر نطاق التاريخ'
                      placeholder='حدد نطاق التاريخ'
                      locale='ar'
                      start-of-week='6'
                    ></bl-datepicker>
                  </div>
                </div>
                <script>
                  // Set Arabic locale for all datepickers
                  const datepickers = document.querySelectorAll('bl-datepicker');
                  datepickers.forEach(datepicker => {
                    datepicker.addEventListener('bl-datepicker-open', () => {
                      const calendar = datepicker.shadowRoot.querySelector('bl-calendar');
                      if (calendar) {
                        calendar.locale = 'ar';
                        calendar.startOfWeek = '6';
                      }
                    });
                  });
                </script>
              </body>
            </html>
          "
          style="border: none; width: 550px; height: 650px;"
        ></iframe>
      </div>
    `}
  </Story>
</Canvas>

Here's a vanilla JavaScript and HTML example of how to use RTL support:

```html
<!-- index.html -->
<html dir="rtl" lang="ar">
<head>
  <meta charset="UTF-8">
  <title>Baklava Datepicker RTL Example</title>
  <script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@latest/dist/baklava.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@trendyol/baklava@latest/dist/themes/default.css">
  <style>
    body {
      margin: 0;
      padding: 24px;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }
    .container {
      display: flex;
      flex-direction: column;
      gap: 32px;
    }
    .datepicker-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    bl-datepicker {
      --bl-datepicker-input-width: 300px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="datepicker-group">
      <h3>منتقي التاريخ الأحادي</h3>
      <bl-datepicker
        type="single"
        label="اختر تاريخ"
        placeholder="حدد تاريخًا"
        locale="ar"
        start-of-week="6"
      ></bl-datepicker>
    </div>

    <div class="datepicker-group">
      <h3>منتقي التواريخ المتعددة</h3>
      <bl-datepicker
        type="multiple"
        label="اختر عدة تواريخ"
        placeholder="حدد عدة تواريخ"
        locale="ar"
        start-of-week="6"
      ></bl-datepicker>
    </div>

    <div class="datepicker-group">
      <h3>منتقي نطاق التاريخ</h3>
      <bl-datepicker
        type="range"
        label="اختر نطاق التاريخ"
        placeholder="حدد نطاق التاريخ"
        locale="ar"
        start-of-week="6"
      ></bl-datepicker>
    </div>
  </div>

  <script>
    // Set Arabic locale for all datepickers
    const datepickers = document.querySelectorAll('bl-datepicker');
    datepickers.forEach(datepicker => {
      datepicker.addEventListener('bl-datepicker-open', () => {
        const calendar = datepicker.shadowRoot.querySelector('bl-calendar');
        if (calendar) {
          calendar.locale = 'ar';
          calendar.startOfWeek = '6';
        }
      });
    });
  </script>
</body>
</html>
```

## Reference

<ArgsTable of="bl-datepicker" />
